<template>
  <div class="Login-Largest-Frame">
    <div class="Login_From">
      <div class="Sign_Words">能力有限公司在线工作平台</div>
      <el-form
          :model="SysUser"
          status-icon
          :rules="rules"
          style="height: 80%;"
          class="Sign_In_Form"
      >
          <el-form-item><!-- prop=""-->
            <el-input type='text' placeholder="请输入账号" v-model="SysUser.userNo" autocomplete="off" clearable/>
          </el-form-item>
          <el-form-item><!-- prop=""-->
            <el-input type='password'  placeholder="请输入密码" v-model="SysUser.userPassword" autocomplete="off" clearable/>
          </el-form-item>


          <div class="Sign_Button">
            <el-button type="primary" @click="Sign()">登录</el-button>
          </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onBeforeMount, reactive, ref} from "vue";
  import axios from "axios";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const num =ref(0);
const CodeItemImg=ref();
  const SysUser = reactive({
    userNo: 'user1003',
    userPassword: '123456',
  })
const store = useStore();
const router=useRouter()
document.addEventListener('keydown',(e)=>{
  let key=window.event.keyCode;
  if(key==13){
    Sign();
  }
})
  const Sign = () =>{
    axios.post("adminOa/User/login/"+SysUser.userNo+"/"+SysUser.userPassword).then((res)=>{
      if(res.data.code==200){
        store.commit("savetoken",res.data.data.token)
        store.commit("saveuser",res.data.data.user)
        store.commit("savepermission",res.data.data.permission)
        sessionStorage.setItem('store',store.state)
        router.push("/")
      }
    })
  }
  onBeforeMount(function (){
    // axios.post("http://localhost:1017/User/captcha").then((res)=>{
    //   console.log(res.data)
    //   let binary = '';
    //   const bytes = new Uint8Array(res.data);
    //   for (var len = bytes.byteLength, i = 0; i < len; i++) {
    //     binary += String.fromCharCode(bytes[i])
    //   }
    //   const codes = JSON.parse(binary);
    // })
  })
</script>

<style scoped>
.Login-Largest-Frame{
  height: 100%;
  width: 100%;
  background:url("../assets/Login3.jpg") ;
  background-size:100% 100% ;
  display: flex;
  align-items: center;
}
.Login_From{
  width: 340px;
  /*margin: 0 auto;*/
  /*position: relative;*/
  /*top: 220px;*/
  /*right: 233px;*/
  margin-left: 170px;
  border: 0px solid red;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 20px 20px 15px rgba(20,20,20,0.5);
}

.Sign_Button{
  text-align: center;

}
.Sign_Button Button{

  width: 150px;
  height: 40px;
}
.Sign_Words{
  height: 80px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 80px;
  color: #ffffff;
}
.CodeItemImg{
  width: 40%;
  background-color: #FFFFFF;
  /*r*/
}
.CodeItemReplace{
  /*width: 100%;*/
}
</style>